<template>
  <div class="app-container home">
    <!-- 系统提示 技术选型 -->
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2 class="text-danger">{{cmenoticTitle}}</h2>
        <p> {{ cmenotic }}</p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>SpringCloud</li>
              <li>Nacos</li>
              <li>Sentinel</li>
              <li>Seata</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Echarts</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <!-- 中间区域 -->
    <el-row :gutter="20">
      <el-col :span="24" class="card-box">
        <el-card>
          <el-row>
            <el-col :span="6" class="order_card-box">
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center">
                      <img v-if="orderimage" :src="orderimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box">
                      <div align="center">
<!--                        <h1>2953</h1>-->
                        <h1>{{orderTotal}}</h1>
                        <h4>订单数量(笔)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box">
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center">
                      <img v-if="moneyimage" :src="moneyimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box">
                      <div align="center">
                        <h1>16</h1>
                        <h4>产品数量(种类)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box">
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center">
                      <img v-if="money1image" :src="money1image" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box">
                      <div align="center">
<!--                        <h1>2560</h1>-->
                        <h1>{{completeQuantity}}</h1>
                        <h4>交货数量(件)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box">
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center">
                      <img v-if="percentageimage" :src="percentageimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box">
                      <div align="center">
                        <h1>{{completeRate}}</h1>
<!--                        <h1>86.69</h1>-->
                        <h4>完成率</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 图表区row1 -->
    <el-row :gutter="20">
      <!-- 图1 -->
<!--      <el-col class="card-box" :xs="24" :sm="24" :md="24" :lg="24">-->
      <el-col class="card-box" span="24">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>本周产量统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="outputstatistics" style="height: 360px" />
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 图2 -->
<!--      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">-->
<!--        <el-card class="update-log">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>本周设备故障频次</span>-->
<!--          </div>-->
<!--          <div class="body">-->
<!--            <div :style="{height:height,width:width}">-->
<!--              <div ref="equipmentfailure" style="height: 360px" />-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
    <!-- 图表区row2 -->
    <el-row :gutter="20">
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <!-- 图1 -->
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>产品质量统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="productquality" style="height: 300px" />
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 图二2 -->
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>订单分类统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="warehousestatistics" style="height: 300px" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import orderImg from "@/assets_cme/images/order.png";
import moneyimage from "@/assets_cme/images/money.png";
import money1image from "@/assets_cme/images/money1.png";
import percentageimage from "@/assets_cme/images/percentage.gif";
import {
  cmenotic,orderTotal,weekOrder,productquality,classificationStatistics
} from "@/api/cmecomon/homepage"
import echarts from "echarts";

export default {
  name: "Index",
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '500px'
  },
  data() {
    return {
      // 版本号
      version: "3.0",

      //图片资源
      orderimage: orderImg,
      moneyimage: moneyimage,
      money1image: money1image,
      percentageimage: percentageimage,

      //  通知
      cmenotic: "暂无通知",
      //通知标题
      cmenoticTitle: "CME后台管理系统通知",
    //  订单总量
      orderTotal: 0,
    //  交货数量
      completeQuantity: 0,
    //  完成率
      completeRate: 0,
    //  本周单量统计
      dates: [],
      metalOrders: [],
      nometalOrders: [],
      laserCladdings: [],
    //  产品质量统计
      qualified: 0,
      outsource: 0,
      scrap: 0,
    //  产品分类统计数据
      metalclassOrders: 0,
      noMetaalOrders: 0,
      laserOrders: 0,
      metalClassList: [],
      noMetalClassList: []
    };
  },

  created() {
    this.getlist();
  },

  mounted() {
    this.$nextTick(() => {
      this.initoutputstatistics();
      // this.initequipmentfailure();
      this.initproductquality();
      this.initwarehousestatistics();
    })
  },

  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    //获取初始数据
    getlist() {

      //获取首页通知
      cmenotic(this.queryParams).then(respnse => {
        this.cmenotic = respnse[0].noticeContent;
        this.cmenoticTitle = respnse[0].noticeTitle;
      });

      //获取订单总量、交货数量、完成率
      orderTotal(this.queryParams).then(respnse => {
      this.orderTotal = respnse.orderTotal;
      this.completeQuantity = respnse.completeQuantity;
      this.completeRate = respnse.completeRate;
      });

      //获取本周订单情况
      weekOrder(this.queryParams).then(response =>{
        this.dates = response.dates;
        this.metalOrders = response.metalOrders;
        this.nometalOrders = response.nometalOrders;
        this.laserCladdings = response.laserCladdings;
        this.initoutputstatistics();
      });

      //获取产品质量数据
      productquality(this.queryParams).then(response =>{
        this.qualified = response.qualified;
        this.outsource = response.outsource;
        this.scrap      = response.scrap;

        this.initproductquality();
      });

      //获取产品类别统计
      classificationStatistics(this.queryParams).then(responce =>{
        this.metalclassOrders = responce.metalOrders;
        this.noMetaalOrders = responce.noMetaalOrders;
        this.laserOrders = responce.laserOrders;
        this.metalClassList = responce.metalClassList;
        this.noMetalClassList = responce.noMetalClassList;

        this.initwarehousestatistics();
      });


      // this.initsalseordertrend();

      this.initequipmentfailure();
      // this.initproductquality();
      // this.initwarehousestatistics();
    },

    //初始化产量统计
    initoutputstatistics() {
      var outputstatistics = echarts.init(this.$refs.outputstatistics, "macarons");
      var outputsoption;
      outputsoption = {
        title: {
          text: '本周生产产量统计',
          subtext: 'Production Output'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['金属打印', '非金属打印', '激光熔覆'],
          top: 'bottom',
        },

        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          // prettier-ignore
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: this.dates,
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '金属打印',
          type: 'bar',
          // data: [18, 33, 105, 126, 115, 145, 77],
          data: this.metalOrders,
          // 设置柱状图颜色渐变
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                // 结束颜色
                offset: 0,
                color: '#1d4489'
              }, {
                // 起始颜色
                offset: 1,
                color: '#bfcdef'
              }]),
            }
          },
          markPoint: {
            data: [{
              type: 'max',
              name: 'Max'
            },
              {
                type: 'min',
                name: 'Min'
              }
            ]
          },
          markLine: {
            data: [{
              type: 'average',
              name: 'Avg'
            }]
          }
        },
          {
            name: '非金属打印',
            type: 'bar',
            // data: [9, 26, 128, 140, 115, 102, 48],
            data: this.nometalOrders,
            markPoint: {
              data: [{
                type: 'max',
                name: 'Max'
              },
                {
                  type: 'min',
                  name: 'Min'
                }
              ]
            },
            // 设置柱状图颜色渐变
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  // 结束颜色
                  offset: 0,
                  color: '#c23531'
                }, {
                  // 起始颜色
                  offset: 1,
                  color: '#d0b0b5'
                }]),
              }
            },
            markLine: {
              data: [{
                type: 'average',
                name: 'Avg'
              }]
            }
          },
          {
            name: '激光熔覆',
            type: 'bar',
            // data: [23, 18, 66, 80, 95, 75, 60],
            data: this.laserCladdings,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  // 结束颜色
                  offset: 0,
                  color: '#503b74'
                }, {
                  // 起始颜色
                  offset: 1,
                  color: '#dbd4e7'
                }]),
              }
            },
            markPoint: {
              data: [{
                type: 'max',
                name: 'Max'
              },
                {
                  type: 'min',
                  name: 'Min'
                }
              ]
            },
            markLine: {
              data: [{
                type: 'average',
                name: 'Avg'
              }]
            }
          }
        ]
      };

      outputstatistics.setOption(outputsoption);

    },

    //初始化本周设备故障频次
    // initequipmentfailure() {
    //   var equipmentfailure = echarts.init(this.$refs.equipmentfailure, "macarons");
    //   var equipmentfailureoption;
    //   equipmentfailureoption = {
    //
    //     title: {
    //       text: '设备故障频次',
    //       subtext: 'Equipment Failure',
    //       left: 'left'
    //     },
    //
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       top: 'bottom'
    //     },
    //     toolbox: {
    //       show: true,
    //       feature: {
    //         mark: {
    //           show: true
    //         },
    //         dataView: {
    //           show: true,
    //           readOnly: false
    //         },
    //         restore: {
    //           show: true
    //         },
    //         saveAsImage: {
    //           show: true
    //         }
    //
    //       }
    //     },
    //     series: [{
    //       name: '设备故障',
    //       type: 'pie',
    //       radius: [25, 100],
    //       center: ['50%', '50%'],
    //       roseType: 'area',
    //       itemStyle: {
    //         borderRadius: 8
    //       },
    //       data: [{
    //         value: 40,
    //         name: '上下料机器人',
    //         // 设置颜色渐变
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //               // 结束颜色
    //               offset: 0,
    //               color: '#1d4489'
    //             }, {
    //               // 起始颜色
    //               offset: 1,
    //               color: '#e5ebf9'
    //             }]),
    //           }
    //         },
    //       },
    //         {
    //           value: 38,
    //           name: '加工机器人',
    //           // 设置颜色渐变
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#489dd8'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#e5ebf9'
    //               }]),
    //             }
    //           },
    //         },
    //         {
    //           value: 32,
    //           name: '码垛机器人',
    //           // 设置颜色渐变
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#ffa94c'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#e5d188'
    //               }]),
    //             }
    //           },
    //         },
    //         {
    //           value: 30,
    //           name: '车床系统',
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#25818f'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#abd5ec'
    //               }]),
    //             }
    //           },
    //         },
    //         {
    //           value: 28,
    //           name: '视觉分拣系统',
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#dd001b'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#ec7699'
    //               }]),
    //             }
    //           },
    //
    //         },
    //         {
    //           value: 26,
    //           name: '倍速链',
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#533a6f'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#c8b3e3'
    //               }]),
    //             }
    //           },
    //         },
    //         {
    //           value: 22,
    //           name: '摄像头',
    //           itemStyle: {
    //             normal: {
    //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                 // 结束颜色
    //                 offset: 0,
    //                 color: '#fb6260'
    //               }, {
    //                 // 起始颜色
    //                 offset: 1,
    //                 color: '#e2804b'
    //               }]),
    //             }
    //           },
    //         },
    //       ]
    //     }]
    //   };
    //
    //   equipmentfailure.setOption(equipmentfailureoption);
    //
    // },

    //初始化产品质量
    initproductquality() {
      var productquality = echarts.init(this.$refs.productquality, "macarons");
      var productqualityoption;
      productqualityoption = {
        title: {
          text: '产品质量统计',
          subtext: 'Product Quality',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: '60%',
          center: ['50%', '60%'],
          data: [{






            value: this.qualified,
            name: '合格',
            // 设置颜色渐变
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  // 结束颜色
                  offset: 0,
                  color: '#77a7cf'
                }, {
                  // 起始颜色
                  offset: 1,
                  color: '#7eebf1'
                }]),
              }
            },
          },
            {
              value: this.outsource,
              name: '外包',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    // 结束颜色
                    offset: 0,
                    color: '#59467c'
                  }, {
                    // 起始颜色
                    offset: 1,
                    color: '#9470bd'
                  }]),
                }
              },
            },
            {
              value: this.scrap,
              name: '报废',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    // 结束颜色
                    offset: 0,
                    color: '#c23531'
                  }, {
                    // 起始颜色
                    offset: 1,
                    color: '#cd6cab'
                  }]),
                }
              },
            }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      productquality.setOption(productqualityoption);

    },

    //初始化仓储统计
    initwarehousestatistics() {
      var warehousestatistics = echarts.init(this.$refs.warehousestatistics, "macarons");
      var warehousestatisticsoption;
      warehousestatisticsoption = {
        title: {
          text: '订单分类统计',
          subtext: 'Order Classification Statistics',
          left: 'left'
        },
        xAxis: {
          data: ['金属打印', '非金属打印', '激光熔覆']
        },
        yAxis: {},
        dataGroupId: '',
        animationDurationUpdate: 500,
        series: {
          type: 'bar',
          id: 'sales',
          data: [{
            value: this.metalclassOrders,
            groupId: '金属打印',
          },
            {
              value: this.noMetaalOrders,
              groupId: '非金属打印'
            },
            {
              value: this.laserOrders,
              groupId: '激光熔覆'
            }
          ],
          // 设置柱状图颜色渐变
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                // 结束颜色
                offset: 0,
                color: '#007acc'
              }, {
                // 起始颜色
                offset: 1,
                color: '#c6d9ef'
              }]),
            }
          },
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        }
      };
      const drilldownData = [{
        dataGroupId: '金属打印',
        // data: [
        //   ['Z01', 4],
        //   ['Z02', 2],
        //   ['Z03', 1],
        //   ['Sheep', 2],
        //   ['Pigs', 1]
        // ],
        data: this.metalClassList,
      },
        {
          dataGroupId: '非金属打印',
          // data: [
          //   ['C01', 4],
          //   ['C02', 2],
          //   ['C03', 1]
          // ]
          data: this.noMetalClassList,
        },
        // {
        //   dataGroupId: '激光熔覆',
        //   data: [
        //     ['L01', 4],
        //     ['L02', 2],
        //     ['L03', 2]
        //   ]
        // }
      ];
      warehousestatistics.on('click', function (event) {
        if (event.data) {
          var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId;
          });
          if (!subData) {
            return;
          }
          warehousestatistics.setOption({
            xAxis: {
              data: subData.data.map(function (item) {
                return item[0];
              })
            },
            series: {
              type: 'bar',
              id: 'sales',
              dataGroupId: subData.dataGroupId,
              data: subData.data.map(function (item) {
                return item[1];
              }),
              universalTransition: {
                enabled: true,
                divideShape: 'clone'
              }
            },
            graphic: [{
              type: 'text',
              right: 50,
              top: 20,
              style: {
                text: '返回',
                fontSize: 18
              },
              onclick: function () {
                warehousestatistics.setOption(warehousestatisticsoption);
              }
            }]
          });
        }
      });

      warehousestatistics.setOption(warehousestatisticsoption);
    },
  },
};

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .sidebar-logo {
    width: 80px;
    height: 80px;
    vertical-align: middle;
    margin-right: 12px;
  }
}

</style>
